<style lang="scss">
  @import "../../../assets/css/_variable";

  .question {

    .content {
      min-height: 200px;
      padding: 0 1em;
      border-bottom: 1px solid $color-gray;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
    }
    .question-stem {

    }
    .options {
      padding: 0 20px;
      background-color: $color-white;

      .option-item {
        height: 50px;
        border-bottom: 1px solid $color-gray;
      }
    }
    .blank {
      padding: 0 1em;
      .input {
        margin-top: $margin-normal;
      }
    }
    .answer {
      min-height: 100px;
      background-color: $color-white;
      border-bottom: 1px solid $color-gray;
    }
    .hints {

    }
  }
</style>
<template>
  <div class="question">
    <div class="content">
      <div class="hidden">{{questionStem}}</div>
      <div class="question-stem"></div>
    </div>
    <div class="options" v-if="question.options">
      <template v-for="(option,index) in question.options">
        <el-row class="option-item" type="flex" justify="space-between" align="middle"
                @click.native="changeAnswer(index+'')">
          <el-col :span="2">
            <span :class="optionClass(index)">{{optionIndex[index]}}</span>
          </el-col>
          <el-col :span="22">
            <div>{{option}}</div>
          </el-col>
        </el-row>
      </template>
    </div>
    <div class="blank" v-else>
      <el-input class="input" :value="answer" @input="changeAnswer"></el-input>
    </div>
    <div class="hints">

    </div>

    <!--<div class="problem xy-card margin-small">-->
    <!--<question v-if="question.content" :question="question" @check="check"></question>-->
    <!--</div>-->
  </div>
</template>

<script type="text/babel">

  import Question from './Question.vue';

  export default {
    components: {
      Question
    },
    props: ['question', 'checking', 'answer'],
    data() {
      return {
        optionIndex: ['A', 'B', 'C', 'D']
      }
    }
    ,
    computed: {
      questionStem() {
        this.renderMathInParent(this.question.stem, 'question-stem');
        return this.question.stem;
      }
    }
    ,
    methods: {
      renderMathInParent: function (text, parentClassName) {
        let elem = this.$func.renderLatexFromString(text);
        let parentElem = document.getElementsByClassName(parentClassName)[0];
        if (parentElem) {
          parentElem.innerHTML = '';
          parentElem.appendChild(elem);
        }
        return elem;
      },
      optionClass(index) {
        if (this.checking) {
          let clazz = 'color-primary';
          if (index == this.answer) {
            clazz = 'bg-color-danger color-white';
            if (this.answer == this.question.answer) {
              clazz = 'bg-color-success color-white';
            }
          }
          return clazz;
        } else {
          if (index == this.answer) {
            return 'bg-color-warning color-white';
          }
          return '';
        }
      },
      changeAnswer(index) {
        this.$emit('update:answer', index);
//        this.answer=index
      }
    }
    ,
    mounted() {
      this.$func.renderMathInParent(this.question.stem, 'question-stem');
    }
  }
  ;
</script>
